<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.prime.com.tr/ui"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:fn="http://java.sun.com/jsp/jstl/functions"
                template="/Facelets/Templates/template.xhtml">

    <ui:define name="content">	

        <script type="text/javascript">  
        function handleLoginRequest(xhr, status, args) {  
         if(args.validationFailed) {  
             jQuery('#dialog').parent().effect("shake", { times:2 }, 100);  
         } else {  
             dlgCadastro.hide();  
         }  
         }
     	
        </script> 
        <div class="ui-widget" style="padding-left: 10px; padding-top: 5px; padding-bottom: 14px;">
            <a href="#{request.contextPath}/index.faces" style="color: black;">Home</a> > Cadastro de Equipamentos
        </div>
        <p:fieldset legend="Cadastro de Equipamentos">
            <table style="width: 100%; height: 100%;">
                <tr>
                <td style="width: 16%; text-align: left;">
                <h:form id="formTool">
                    <p:panel>
                        <p:commandButton title="Cadastrar Novo Equipamento"
                                         value="Novo Equipamento" image="ui-icon ui-icon-document"
                                         oncomplete="dlgCadastro.show()" update="formCadastro"
                                         action="#{EquipamentosBean.botaoNovoEquipamentoAction}" style="width: 160px; height: 30px;"/>
                    </p:panel>
                </h:form>
                </td>
                <td style="width: 25%;"></td>
                <td><h:graphicImage value="/imagens/messagebox.png" /></td>
                <td style="text-align: left;">
                    <p>
                        <span style="color: cornflowerblue;" class="ui-widget">Nesta seção pode ser feito o cadastro de novos <strong>equipamentos</strong>, edição ou exclusão.</span><br/>
                        <span style="color: cornflowerblue;" class="ui-widget">Dica 1: Para cadastrar novos clique no botão a sua esquerda.</span><br/>
                        <span style="color: cornflowerblue;" class="ui-widget">Dica 2: Para editar ou excluir visualize e os faça na tabela abaixo.</span>
               
                    </p>
                </td>
                <td style="width: 10%;"></td>
                </tr>
            </table>
        </p:fieldset>

        <h:form id="formTabela">
            <p:panel>
                <p:dataTable id="List" rows="10" paginator="true" emptyMessage="Nenhum registro encontrado"
                             paginatorPosition="top" value = "#{EquipamentosBean.equipamentos}"
                             var="equipamento">
                    <f:facet name="header">Equipamentos</f:facet>

                    <p:column headerText="Tipo" style="width:300px" filterBy="#{equipamento.tipo}" sortBy="#{equipamento.tipo}">
                        <h:outputText value="#{equipamento.tipo}"/>
                    </p:column>

                    <p:column headerText="Descricao" style="width:600px">
                        <h:outputText value="#{equipamento.descricao}" />
                    </p:column>

                    <p:column headerText="N do Patrimônio" style="width:200px">
                        <h:outputText value="#{equipamento.numeroPatrimonio}"/>
                    </p:column>

                    <p:column headerText="Marca" style="width:200px">
                        <h:outputText value="#{equipamento.marca}" />
                    </p:column>

                    <p:column headerText="Modelo" style="width:300px">
                        <h:outputText value="#{equipamento.modelo}" />
                    </p:column>

                    <p:column headerText="Rack" style="width:100px">
                        <h:outputText value="#{equipamento.racknumero.numero}" />
                    </p:column>

                    <p:column headerText="Editar" style="width:10px">
                        <p:commandButton image="ui-icon-pencil" update="formCadastro"
                                         action="#{EquipamentosBean.botaoAlterarEquipamentoAction}"
                                         oncomplete="dlgCadastro.show();">
                            <f:setPropertyActionListener value="#{equipamento}"
                                                         target="#{EquipamentosBean.equipamento}"/>
                        </p:commandButton>
                    </p:column>

                    <p:column headerText="Excluir" style="width:32px">
                        <p:commandButton update="formTabela"
                                         onclick="confirmation.show();" image="ui-icon-trash">
                            <f:setPropertyActionListener value="#{equipamento}"
                                                         target="#{EquipamentosBean.equipamento}"/>
                        </p:commandButton>
                    </p:column>

                    <f:facet name="footer">  
                        #{fn:length(EquipamentosBean.equipamentos)} Equipamentos no total.  
                    </f:facet>
                </p:dataTable>
            </p:panel>

        </h:form>

        <h:form>
            <p:confirmDialog message="Deseja realmente excluir este Equipamento?"
                             showEffect="slide" hideEffect="explode" appendToBody="true"
                             header="Confirmação" severity="alert" modal="true"
                             widgetVar="confirmation">

                <p:commandButton value="Sim" update="formTabela"
                                 oncomplete="confirmation.hide()"
                                 action="#{EquipamentosBean.botaoApagarEquipamentoAction}"/>
                <p:commandButton value="Não" onclick="confirmation.hide()"
                                 type="button" />
            </p:confirmDialog>
        </h:form>

        <p:dialog id = "dialog" widgetVar="dlgCadastro" resizable="false" modal="true" appendToBody="true" closeOnEscape="true"
                  position="center" width="710">
            <h:form id="formCadastro">
                <p:growl id="msgs"/>
                <p:fieldset legend="Cadastro de Equipamentos">
                    <h:panelGrid columns="2" cellpadding="5">
                    <h:outputText value="Tipo:" style="width:  500px" />
                    <h:panelGrid columns="5" cellspacing="2">
                        <h:selectOneMenu required="true" requiredMessage="Campo [Tipo] de preenchimento obrigatório"
                                         value="#{EquipamentosBean.equipamento.tipo}" 
                                         converter="TipoConverter">
                            <f:selectItem itemLabel="-- Selecione um Tipo --"/>
                            <f:selectItems value="#{EquipamentosBean.listaTipo}"/>
                        </h:selectOneMenu>
                        
                            <h:outputText value ="Clique"/>
                            <p:commandLink value="aqui" action="#{EquipamentosBean.linkAddNovoTipo}"
                                           oncomplete ="dlgCadastroTipo.show()" update="formCadastroTipo"
                                           immediate="true"/>
                            <h:outputText value ="Caso não tenha encontrado o tipo desejado."/>                            
                     
                        </h:panelGrid>
                        <h:outputText value="Descricao*:" />
                        <p:inputText style="width:200px"
                                     required="true" requiredMessage="Campo [Descricao] de preenchimento obrigatório"
                                     onkeydown="this.value = this.value.toUpperCase();"
                                     onkeyup="this.value = this.value.toUpperCase()"
                                     value="#{EquipamentosBean.equipamento.descricao}">

                        </p:inputText>

                        <h:outputText value="Numero do Patrimonio*:" />
                        <p:inputText style="width:200px"
                                     required="true"	requiredMessage="Campo [Patrimonio] de preenchimento obrigatório"
                                     onkeydown="this.value = this.value.toUpperCase();"
                                     onkeyup="this.value = this.value.toUpperCase()"
                                     value="#{EquipamentosBean.equipamento.numeroPatrimonio}">

                        </p:inputText>

                        <h:outputText value="Marca:" />
                        <p:inputText style="width:200px"
                                     onkeydown="this.value = this.value.toUpperCase();"
                                     onkeyup="this.value = this.value.toUpperCase()"
                                     value="#{EquipamentosBean.equipamento.marca}">

                        </p:inputText>
                        <h:outputText value="Modelo:" />
                        <p:inputText style="width:200px"
                                     onkeydown="this.value = this.value.toUpperCase();"
                                     onkeyup="this.value = this.value.toUpperCase()"
                                     value="#{EquipamentosBean.equipamento.modelo}">
                        </p:inputText>
                    </h:panelGrid>
                    <h:panelGrid columns="3" cellpadding="5">
                        <p:commandButton value="Salvar" image = "ui-icon-save"
                                         update="formTabela msgs"  oncomplete="handleLoginRequest(xhr, status, args)"
                                         action="#{EquipamentosBean.botaoSalvarEquipamentoAction}"/>
                        <p:commandButton type="reset" value="Resetar Modificações" />
                        <p:commandButton value="Cancelar" immediate="true" onclick="dlgCadastro.hide()"/>
                    </h:panelGrid>
                </p:fieldset>
            </h:form>
        </p:dialog>

        <p:dialog id = "dialogTipo" widgetVar="dlgCadastroTipo" resizable="false" modal="true" appendToBody="true" closeOnEscape="true"
                  position="center" width="710">
            <h:form id="formCadastroTipo">
                <p:fieldset legend="Cadastro Tipos de Equipamentos">
                    <h:panelGrid columns="2" cellpadding="10">
                        <h:outputText value="Tipo de Equipamento*:"/>
                        <h:inputText id ="txtTipo" value ="#{EquipamentosBean.tipo.tipo}" required="true" requiredMessage="Campo [Tipo de Equipamento] de preenchimento obrigatório"/>
                    </h:panelGrid>

                    <h:panelGrid columns="2" cellpadding="10">
                        <p:commandButton value="Salvar" image = "ui-icon-save" update="formCadastro mensagens" 
                                         action="#{EquipamentosBean.botaoSalvarTipoAction}"
                                         oncomplete="dlgCadastroTipo.hide()"/>
                        <p:commandButton type="reset" value="Resetar Modificações" />    			
                    </h:panelGrid>    			
                </p:fieldset>
            </h:form>
        </p:dialog>   
    </ui:define>
</ui:composition>